<template>
  <view @touchmove.stop.prevent="stop">
    <view
      class="tui-bottom-navigation"
      :class="{
        'tui-navigation-fixed': isFixed,
        'tui-remove-splitLine': unlined
      }"
    >
      <view
        class="tui-navigation-item"
        :class="{
          'tui-item-after_height': splitLineScale,
          'tui-last-item': index == itemList.length - 1
        }"
        :style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
        v-for="(item, index) in itemList"
        :key="index"
      >
        <view
          class="tui-item-inner"
          @tap="menuClick(index, item.parameter, item.type)"
        >
          <image
            :src="getIcon(current, index, item)"
            class="tui-navigation-img"
            v-if="
              item.iconPath ||
              (current == index && item.selectedIconPath && item.type == 1)
            "
          ></image>
          <text
            class="tui-navigation-text"
            :style="{
              color: isDarkMode
                ? '#fff'
                : current == index && item.type == 1
                ? selectedColor
                : item.color || color,
              fontWeight:
                current == index && bold && item.type == 1 ? 'bold' : 'normal',
              fontSize: fontSize
            }"
          >
            {{ item.text }}
          </text>
        </view>
        <view
          class="tui-navigation-popup"
          :class="{ 'tui-navigation-popup_show': showMenuIndex == index }"
          :style="{
            backgroundColor: isDarkMode ? '#4c4c4c' : subMenuBgColor,
            left: item.popupLeft || '50%'
          }"
          v-if="item.itemList"
        >
          <view
            class="tui-popup-cell"
            :class="{
              'tui-first-cell': subIndex === 0,
              'tui-last-cell': subIndex === item.itemList.length - 1
            }"
            :hover-class="
              subMenuHover
                ? isDarkMode
                  ? 'tui-item-dark_hover'
                  : 'tui-item-hover'
                : ''
            "
            :hover-stay-time="150"
            v-for="(subItem, subIndex) in item.itemList || []"
            :key="subIndex"
            @tap="
              subMenuClick(index, item.type, subIndex, subItem.parameter || '')
            "
          >
            <text
              class="tui-ellipsis"
              :style="{
                color: isDarkMode ? '#fff' : subMenuColor,
                fontSize: subMenufontSize,
                lineHeight: subMenufontSize
              }"
            >
              {{ subItem.text }}
            </text>
          </view>
          <view
            class="tui-popup-triangle"
            :style="{ borderTopColor: isDarkMode ? '#4c4c4c' : subMenuBgColor }"
          ></view>
        </view>
      </view>
    </view>
    <view
      class="tui-navigation-mask"
      :class="{ 'tui-navigation-mask_show': showMenuIndex != -1 }"
      @tap="handleClose"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'tuiBottomNavigation',
  emits: ['click'],
  props: {
    //当前索引
    current: {
      type: Number,
      default: 0
    },
    /**
		 * {
				text: 'ThorUI',
				iconPath: '/static/images/common/icon_menu_gray.png',
				selectedIconPath: '/static/images/common/icon_menu_gray.png',
				color: '#666',
				//1-选中切换，2-跳转、请求、其他操作，3-菜单
				type: 3,
				//自定义参数，类型自定义
				parameter: null,
				//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
				popupLeft: '',
				itemList: [
					{
						//不建议超过6个字，请自行控制
						text: '自定义参',
						//自定义参数，类型自定义
						parameter: null
					},
					{
						text: '自定义参数',
						//自定义参数，类型自定义
						parameter: null
					}
				]
			}
		 * 
		 * */
    itemList: {
      type: Array,
      default: () => {
        return []
      }
    },
    //颜色
    color: {
      type: String,
      default: '#666'
    },
    //选中颜色
    selectedColor: {
      type: String,
      default: '#5677fc'
    },
    fontSize: {
      type: String,
      default: '28rpx'
    },
    //选中后字体是否加粗
    bold: {
      type: Boolean,
      default: true
    },
    //导航条背景颜色
    backgroundColor: {
      type: String,
      default: '#F8F8F8'
    },
    //item分割线高度是否缩小
    splitLineScale: {
      type: Boolean,
      default: true
    },
    //二级菜单字体颜色
    subMenuColor: {
      type: String,
      default: '#333'
    },
    //二级菜单字体大小
    subMenufontSize: {
      type: String,
      default: '28rpx'
    },
    //二级菜单背景色  深色：#4c4c4c
    subMenuBgColor: {
      type: String,
      default: '#fff'
    },
    //二级菜单是否有点击效果
    subMenuHover: {
      type: Boolean,
      default: true
    },
    //是否固定在底部
    isFixed: {
      type: Boolean,
      default: true
    },
    //去除导航栏顶部的线条
    unlined: {
      type: Boolean,
      default: false
    },
    //是否暗黑模式 (true：所有设置颜色失效)
    isDarkMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showMenuIndex: -1 //显示的菜单index
    }
  },
  methods: {
    getIcon: function (current, index, item) {
      let url = item.iconPath
      if (item.type == 1) {
        url =
          current == index
            ? item.selectedIconPath || item.iconPath
            : item.iconPath
      }
      return url
    },
    stop() {
      return false
    },
    handleClose() {
      this.showMenuIndex = -1
    },
    menuClick(index, parameter, type) {
      //type：1-选中切换，2-跳转、请求、其他操作，3-菜单
      if (type == 3) {
        this.showMenuIndex = this.showMenuIndex == index ? -1 : index
      } else {
        this.showMenuIndex = -1
        this.$emit('click', {
          menu: 'main', //main,sub 主菜单，子菜单
          type: type,
          index: index,
          parameter: parameter || ''
        })
      }
    },
    subMenuClick(index, type, subIndex, parameter) {
      this.showMenuIndex = -1
      this.$emit('click', {
        menu: 'sub', //main,sub 主菜单，子菜单
        type: type,
        index: index,
        subIndex: subIndex,
        parameter: parameter || ''
      })
    }
  }
}
</script>

<style scoped>
.tui-bottom-navigation {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 999;
}

.tui-navigation-fixed {
  position: fixed !important;
  left: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-bottom-navigation::after {
  content: '';
  width: 100%;
  border-top: 1px solid #bfbfbf;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 0;
  z-index: 1000;
}
.tui-remove-splitLine::before {
  border-top: 0 !important;
}

.tui-navigation-item {
  flex: 1;
  height: 100rpx;
  position: relative;
  box-sizing: border-box;
}

.tui-item-inner {
  width: 100%;
  height: 100rpx;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.tui-navigation-item::after {
  height: 100%;
  content: '';
  position: absolute;
  border-right: 1px solid #bfbfbf;
  transform: scaleX(0.5) translateZ(0);
  right: 0;
  top: 0;
}

.tui-item-after_height::after {
  height: 40% !important;
  top: 30% !important;
}

.tui-last-item::after {
  border-right: 0 !important;
}

.tui-navigation-img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.tui-navigation-popup {
  max-width: 160%;
  width: auto;
  position: absolute;
  border-radius: 8rpx;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  transform-origin: center;
  transition: all 0.12s ease-in-out;
  bottom: 0;
  z-index: -1;
}

.tui-navigation-popup_show {
  transform: translate3d(-50%, -124rpx, 0);
  visibility: visible;
  opacity: 1;
}

.tui-popup-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 9rpx solid transparent;
  border-right: 9rpx solid transparent;
  border-top: 18rpx solid;
  left: 50%;
  bottom: -18rpx;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 997;
}

.tui-popup-cell {
  width: 100%;
  padding: 32rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.tui-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-popup-cell::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 24rpx;
  left: 24rpx;
}

.tui-item-hover {
  background-color: #f1f1f1;
}

.tui-item-dark_hover {
  background-color: #555;
}

.tui-first-cell {
  border-top-left-radius: 8rpx;
  border-top-right-radius: 8rpx;
}

.tui-last-cell {
  border-bottom-left-radius: 8rpx;
  border-bottom-right-radius: 8rpx;
}

.tui-last-cell::after {
  border-bottom: 0 !important;
}

.tui-navigation-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0);
}

.tui-navigation-mask_show {
  opacity: 1;
  visibility: visible;
}
</style>
